<template>
  <div class="about">
    <el-table :data="tableData">
      <el-table-column prop="title" label="title" />
      <el-table-column prop="content" label="content" />
      <el-table-column prop="createAt" label="createAt" />
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
          >
            Edit
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getArticle, deleteArticle, getUser } from "./service";

const router = useRouter();
const tableData = ref([]);

function handleEdit(index, row) {
  console.log("编辑");
  const id = row._id;
  router.push(`/posts/create?id=${id}`);
}

async function handleDelete(index, row) {
  console.log("删除");
  await deleteArticle(row._id);
  await getList();
}

function getList() {
  getArticle().then((res) => {
    tableData.value = res.data || [];
  });
}

onMounted(() => {
  getList();
  getUser();
});
</script>
